<template>
    <div class="container">
        <el-form :model="data" label-width="10rem" :rules="rules">
            <el-form-item label="请输入原密码：" prop="oldPass">
                <el-input v-model="data.oldPass" type="password"></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码：" prop="newPass">
                <el-input v-model="data.newPass" type="password"></el-input>
            </el-form-item>
            <el-form-item label="请再次输入新密码：" prop="checkPass">
                <el-input v-model="data.checkPass" type="password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
        </el-form>
    </div>
</template>

<script>
import store from "@/store";
import service from "@/utils/request";
import { ElMessage } from "element-plus";

export default {
    components: {},
    data() {
        return {
            userInfo: {},
            data: {
                oldPass: "",
                newPass: "",
                checkPass: "",
            },
            rules: {
                oldPass: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入原密码"));
                        } else if (value.length < 3) {
                            callback(new Error("密码不得少于3位"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                newPass: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入新密码"));
                        } else if (value.length < 3) {
                            callback(new Error("密码不得少于3位"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                checkPass: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请再次输入新密码"));
                        } else if (value !== this.data.newPass) {
                            callback(new Error("两次密码不一致"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
            },
        };
    },
    computed: {},
    methods: {
        submit() {
            service({
                method: "post",
                url: "/login",
                headers: {
                    "Content-type": "application/json",
                },
                data: {
                    username: this.userInfo.username,
                    password: this.data.oldPass,
                    isAdmin: 0,
                },
            }).then((res) => {
                if (res.ok) {
                    service({
                        method: "post",
                        url: "/user/saveUser",
                        headers: {
                            token: store.state.token,
                            "Content-type": "application/json",
                        },
                        data: {
                            ...this.userInfo,
                            password: this.data.newPass,
                        },
                    })
                        .then((res) => {
                            ElMessage({
                                type: "success",
                                message: "修改成功，请重新登录",
                            });
                            store.commit("setActiveIndex", "user/login");
                            store.commit("logout");
                            setTimeout(() => {
                                window.location.reload();
                                _that.$router.replace({ name: "login" });
                            }, 200);
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    ElMessage({
                        type: "error",
                        message: "原密码错误",
                    });
                }
            });
        },
    },
    mounted() {
        this.userInfo = { ...store.state.userInfo };
    },
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
